<template>
  <div class="app-container">
    <!-- Main Content -->
    <el-main>
      <div class="dashboard-layout">
        <!-- 上部分左右布局 -->
        <div class="top-section">
          <!-- 左侧：多数据展示和环状占比 -->
          <div class="left-column">
            <!-- 多数据展示 -->
            <div class="card statistics-section">
              <h2>多数据展示</h2>
              <div class="statistics-grid">
                <div class="statistic-item">
                  <div class="statistic-title">学习时长</div>
                  <div class="statistic-value">2,000,000</div>
                </div>
                <div class="statistic-item">
                  <div class="statistic-title">做题总数</div>
                  <div class="statistic-value">6900</div>
                </div>
                <div class="statistic-item">
                  <div class="statistic-title">课堂参与度</div>
                  <div class="statistic-value">12300</div>
                </div>
                <div class="statistic-item">
                  <div class="statistic-title">总成绩</div>
                  <div class="statistic-value">566</div>
                </div>
                <div class="statistic-item">
                  <div class="statistic-title">校园排名</div>
                  <div class="statistic-value">700</div>
                </div>
              </div>
            </div>

            <!-- 环状占比 -->
            <div class="card subject-scores-section">
              <h2>环块占比</h2>
              <div class="subject-scores">
                <div class="subject-card">
                  <div class="subject-name">语文</div>
                  <el-progress type="dashboard" :percentage="80" :width="180" :stroke-width="15"
                              color="#409EFF" :format="() => '120'"/>
                </div>
                <div class="subject-card">
                  <div class="subject-name">数学</div>
                  <el-progress type="dashboard" :percentage="93" :width="180" :stroke-width="15"
                              color="#67C23A" :format="() => '140'"/>
                </div>
                <div class="subject-card">
                  <div class="subject-name">英语</div>
                  <el-progress type="dashboard" :percentage="87" :width="180" :stroke-width="15"
                              color="#E6A23C" :format="() => '130'"/>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧：功能模块 -->
          <div class="right-column">
            <div class="card feature-section">
              <h2>功能模块</h2>
              <div class="feature-list">
                <!-- 个人学习报告 -->
                <div class="feature-item">
                  <h3>个人学情报告</h3>
                  <p>清晰呈现学生知识点掌握的进度条、弱项点定位热力图，为个性化知识巩固指明方向。</p>
                  <el-button type="primary" plain class="detail-btn">查看详情</el-button>
                </div>

                <!-- 错题管理 -->
                <div class="feature-item">
                  <h3>错题管理</h3>
                  <p>深度剖析学习问题点、学习持续力曲线、自学拓展广度，助力筛选契合个性的学习规划。</p>
                  <el-button type="primary" plain class="detail-btn">查看详情</el-button>
                </div>

                <!-- 在线测试 -->
                <div class="feature-item">
                  <h3>在线测试</h3>
                  <p>精准追踪堆栈模型提升、问题解决路径选择、创新实践能力培养与成长，全程陪伴学生能力进阶</p>
                  <el-button type="primary" plain class="detail-btn">查看详情</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 下部分：成绩趋势图表（横跨整个宽度） -->
        <div class="bottom-section">
          <div class="card performance-trend-section">
            <div class="trend-header">
              <h2>成绩趋势</h2>
              <el-select v-model="selectedTimeframe" placeholder="选择时间" class="timeframe-select">
                <el-option label="本周" value="week"></el-option>
                <el-option label="本月" value="month"></el-option>
                <el-option label="本学期" value="semester"></el-option>
              </el-select>
            </div>
            <div class="chart-container">
              <LineChart />
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LineChart from '@/components/LineChart.vue';

const selectedTimeframe = ref('week');
</script>

<style scoped>
.app-container {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 0;
  height: 60px;
  background-color: #fff;
}

.logo-container {
  margin-right: 20px;
}

.logo {
  height: 40px;
}

.nav-menu {
  flex-grow: 1;
  border-bottom: none;
}

.right-section {
  display: flex;
  align-items: center;
}

.search-input {
  margin-right: 20px;
  width: 200px;
}

.avatar {
  cursor: pointer;
}

/* 整体布局容器 */
.dashboard-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* 上部分左右布局 */
.top-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.left-column, .right-column {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 下部分全宽布局 */
.bottom-section {
  width: 100%;
}

/* 卡片通用样式 */
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
}

/* 统计数据部分 */
.statistics-section h2 {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 500;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 15px;
}

.statistic-item {
  background-color: #f9fafb;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}

.statistic-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.statistic-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

/* 环状占比部分 */
.subject-scores-section h2 {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 500;
}

.subject-scores {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.subject-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subject-name {
  font-size: 16px;
  margin-bottom: 10px;
  color: #606266;
}

/* 功能模块部分 */
.feature-section h2 {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 500;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.feature-item {
  background-color: #f9fafb;
  padding: 15px;
  border-radius: 8px;
}

.feature-item h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #303133;
}

.feature-item p {
  color: #606266;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.5;
}

.detail-btn {
  padding: 6px 12px;
  font-size: 12px;
}

/* 成绩趋势部分 */
.performance-trend-section {
  margin-bottom: 0;
}

.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.trend-header h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.timeframe-select {
  width: 120px;
}

.chart-container {
  height: 300px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .top-section {
    flex-direction: column;
  }

  .left-column, .right-column {
    width: 100%;
  }

  .statistics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .statistics-grid {
    grid-template-columns: 1fr;
  }

  .subject-scores {
    flex-direction: column;
    align-items: center;
  }
}
</style>
